/**
 * 轮播图需求:
 * 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮
 * 2.点击右侧按钮一次, 图片往右播放一张, 依次类推, 左侧按钮同理
 * 3.图片播放的同时, 下面小圆圈模块跟随一起变化
 * 4.点击小圆圆, 可以播放相应图片
 * 5.鼠标不经过轮播图, 轮播图也会自动播放图片
 * 6.鼠标经过轮播图模块, 自动播放停止
 */

window.addEventListener('load', function () {

    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    // 轮播图的 ul 标签
    const ul = document.querySelector('.focus');
    // 轮播图指示器的 ol 标签
    const circle = document.querySelector('.indicator');
    // 包裹 ul 轮播图的版心
    const focus = document.querySelector('.xtx-entry .container');
    // 版心盒子的宽度, 也是一张轮播图移动的宽度
    const focusWith = focus.offsetWidth;


    // 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮
    focus.addEventListener('mouseover', function () {
        prev.style.display = 'inline-block';
        next.style.display = 'inline-block';
        window.clearInterval(timer);
        timer = null;       // 释放timer内存
    })
    focus.addEventListener('mouseout', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = window.setInterval(function () {
            // 手动调用点击事件
            next.click();
        }, 2000);
    })


    // 2.动态生成小圆圈: 小圈圈个数要跟图片张数一致
    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        // 通过设置自定义属性, 给每个指示器添加一个索引号
        li.setAttribute('data-index', i);

        circle.appendChild(li);

        // 3.小圆圈的排他思想
        li.addEventListener('click', function () {
            circleChange(circle, i);

            // 5.点击指示器, 移动图片 (li), 当然移动的是 ul (父元素, 而不是子元素li)
            //
            var index = this.getAttribute('data-index');
            num = index;
            circleCount = index;
            // 为什么移动是 负值, 负 -> 向右走
            animate(ul, -index * focusWith);
        })
    }

    // 4.默认给第一次指示器添加active样式
    circle.children[0].className = 'active';

    /**
     * 点击右侧按钮一次, 就让图片滚动一张.
     * 声明一个变量num, 点击一次, 自增1, 让这个变量乘以图片宽度, 就是ul的滚动
     * #
     * 图片无缝滚动原理
     * 把ul第一个li复制一份, 放在ul的最后面
     * 当图片滚动到克隆的最后一张图片时, 让ul快速的、不做动画的跳到最左侧: left为0
     * 同时num赋值为0, 可以重新开始滚动图片了
     */

        // 6.点击右侧按钮, 图片就滚动一张
        // 克隆第一张图片
        // bug点 ul.cloneNode(true);
    var firstNode = ul.children[0].cloneNode(true);
    ul.appendChild(firstNode);

    let num = 0;
    let circleCount = 0;
    // 节流阀, 防止轮播图按钮连续点击造成播放过快
    // 目的: 当上一个函数动画内容执行完毕, 在去执行下一个函数动画, 让时间无法连续触发
    // 核心实现思路: 利用回调函数, 添加一个变量来控制, 锁住函数和解锁函数
    let flag = true;
    next.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 如果走到了最后复制的一张图片, 此时我们的ul要快速将left改为0
            if (num === ul.children.length - 1) {
                ul.style.left = '0';
                num = 0;
            }
            num++;

            // 9.点击右侧按钮, 小圆圈跟随一起变化, 可以再声明一个变量控制小圆圈的播放
            circleCount++;
            // 当我们移动到最后克隆的一张图片, 就重置circleCount的值
            if (circleCount === ul.children.length - 1) {
                circleCount = 0;
            }
            // console.log(`next -> num: ${num}`)
            // console.log(`next -> circleCount: ${circleCount}`)
            // 排他思想
            circleChange(circle, circleCount);

            animate(ul, -num * focusWith, function () {
                flag = true;
            });
        }

    });

    prev.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 如果 num === 0, 就表示我们在第一图片点击了prev
            if (num === 0) {
                num = ul.children.length - 1;
                // 负值 --> 向左移动
                ul.style.left = -num * focusWith + 'px';
            }
            num--;

            // 9.点击右侧按钮, 小圆圈跟随一起变化, 可以再声明一个变量控制小圆圈的播放
            circleCount--;
            // 当我们移动到最后克隆的一张图片, 就重置circleCount的值
            if (circleCount < 0) {
                circleCount = circle.children.length - 1;
            }

            // console.log(`prev -> num: ${num}`)
            // console.log(`prev -> circleCount: ${circleCount}`)
            // 排他思想
            circleChange(circle, circleCount);

            animate(ul, -num * focusWith, function () {
                flag = true;
            });
        }

    });

    /**
     * 在轮播图指示器数组中, 给定index添加 active 样式
     * @param circle 轮播图指示器数组
     * @param index 索引
     */
    function circleChange(circle, index) {
        // 排他思想
        for (let child of circle.children) {
            // 排他思想
            child.className = '';
        }
        /*// bug点,  长度写成 circle.length
        for (let i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';
        }*/
        circle.children[index].className = 'active'
    }

    /**
     * 10.自动播放轮播图
     */
    let timer = window.setInterval(function () {
        // 手动调用点击事件
        next.click();
    }, 3000);
})
